<%@taglib prefix="s" uri="/struts-tags"%>

<script type="text/javascript" charset="utf-8"
	src="js/jquery.listnav.min-2.1.js"></script>
<script type="text/javascript" charset="utf-8"
	src="js/jquery.dataTables.listnav.js"></script>
	
<script type="text/javascript" charset="utf-8"
	src="js/jquery.validate.min.js"></script>

<script src="js/jquery.jgrowl_minimized.js"></script>
	
	
<script type="text/javascript" charset="utf-8">
	var arr;
	$.ajax({
		url : 'checkNameDepartment.action',
		success : function(data) {
			arr= data.listName;
		}
	});

	$(document).ready( function() {		
		$(".nameError").hide();
		$(".descriptionError").hide();
		
		$("#btnSave").click(function(){
			var value = $("#name").val();
			var description = $("#shortDescription").val();

			for ( var i = 0; i < arr.length; i++) {
				if (value == arr[i]) {
					$('.nameError').show();
					$('#txtHidden').val("");
					return;
				}
			}
			if (value == "") {
				$('.nameError').show();
				$('#txtHidden').val("");
			} else {
				$('.nameError').hide();
			}
			if (description == ""){
				$('.descriptionError').show();
			} else{
				$('.descriptionError').hide();
			}
			if (value != "" && description != ""){
				$('#txtHidden').val("aa");
			}			
		});
		
		
		if ($('.validate').length > 0) {
			$('.validate').validate(
					{
						highlight : function(label) {
							$(label).closest('.control-group')
									.addClass('error');
						},
						success : function(label) {
							label.addClass('valid').closest(
									'.control-group').addClass(
									'success');
						}
					});
		}
		
		
		$("#rdbParent").click(function(){
			$.ajax({
				url : 'copyFromParent.action',
				success : function(data) {
					$("#addressLine1").val(data.copyFromParent[0]);
					$("#addressLine2").val(data.copyFromParent[1]);
					$("#addressLine3").val(data.copyFromParent[2]);
					$("#postcode").val(data.copyFromParent[3]);
					$("#city").val(data.copyFromParent[4]);
					$("#county").val(data.copyFromParent[5]);
					$("#selsear").val(data.copyFromParent[6]);
				}
			});
		});
		
		$("#rdbOrganisation").click(function(){
			$.ajax({
				url : 'copyFromOrganisation.action',
				success : function(data) {
					$("#addressLine1").val(data.copyFromParent[0]);
					$("#addressLine2").val(data.copyFromParent[1]);
					$("#addressLine3").val(data.copyFromParent[2]);
					$("#postcode").val(data.copyFromParent[3]);
					$("#city").val(data.copyFromParent[4]);
					$("#county").val(data.copyFromParent[5]);
					$("#selsear").val(data.copyFromParent[6]);
				}
			});
		});
	});

	
</script>

<div class="container-fluid">
	<div class="content">
		<div class="row-fluid">
			<div class="span12">
			<h3>Create Department</h3>
				<div class="box">
					<form action='saveDepartment.action?directorateId=<s:property value="directorateId"/>'  
						method="POST" class='validate form-horizontal'>
					<div class="box-head tabs">
						<div style="width: 280px;">
							<ul class="nav nav-tabs nav-tabs-left">
								<li class='active'>
									<a href="#0" data-toggle="tab">Details</a>
								</li>
							</ul>
						</div>
						<div style="float: right;">
							<ul style="list-style: none;">
								<li style="float: left; margin-right: 10px;">
									<input type="submit" value="Save" id="btnSave"
												class='btn btn-success pl_start btn-small '
												data-content="Some sample content ok"> 
								</li>
								<li style="float: left;">
									<a href='editDirectorate.action?directorateId=<s:property value="directorateId"/>'> <input type="button"
									value="Back" id="back" class='btn btn-success '> </a>
								</li>
							</ul>
						</div>
					</div>
					<div class="box-content" id="organisation">
						<div class="tab-content">
							<div class="tab-pane active" id="0">
									<div class="row-fluid force-margin">
										<div class="span3">
											<div class="control-group control-check" id="control-check">
												<label for="req" class="control-label require">Department Name</label>
												<div class="controls ">
													<input type="text" name="name" id="name" value="">
													<label class='nameError'
														style='color: #B94A48'>This field cannot null or is existed.
													</label>
												</div>
											</div>
											<div class="control-group">
												<label for="req" class="control-label">Department Short Description</label>
												<div class="controls">
													<textarea style="resize: none;" rows="3" class="input-square control-check" id="shortDescription" width="210px" name="shortDescription"></textarea>
													<label class='descriptionError'
														style='color: #B94A48'>This field cannot null .
													</label>
												</div>
											</div>
											<div class="control-group">
												<label for="req" class="control-label require">Lead Contact</label>
												<div class="controls">
													<input type="hidden" name="leadContactId" id="contact-id" class='input-medium input-square' readonly="readonly" value=""> 
													<input type="text" name="leadContactName" id="contact-name" class='input-medium input-square' readonly="readonly" value=""> 
													<a id="lookup-contact" data-toggle="modal" href="#lookUpContact">Lookup</a>
												</div>
											</div>
											<div class="control-group">
												<label for="radio2" class="control-label">Copy Address From</label>
												<div class="controls">
													<label class="radio" style="float: left;"><input type="radio" name="radio2" class='rdb' id="rdbOrganisation" >Organisation</label>
													<label class="radio" style="float: left; padding: 5px 5px 5px 70px;"><input type="radio" class='rdb' name="radio2" id="rdbParent">Parent</label>
												</div>
											</div>
											<div class="control-group">
												<label for="req" class="control-label require">Address Line 1</label>
												<div class="controls">
													<input type="text" name="addressLine1" id="addressLine1" class=''>
												</div>
											</div>
											<div class="control-group">
												<label for="req" class="control-label">Address Line 2</label>
												<div class="controls">
													<input type="text" name="addressLine2" id="addressLine2" class=''>
												</div>
											</div>
											<div class="control-group">
												<label for="req" class="control-label">Address Line 3</label>
												<div class="controls">
													<input type="text" name="addressLine3" id="addressLine3" class=''>
												</div>
											</div>
											<div class="control-group">
												<label for="email3" class="control-label require">Postcode</label>
												<div class="controls">
													<input type="text" name="postcode" id="postcode" class='input-medium input-square' value=""> 
													<a class="" id="lookup-postcode" data-toggle="modal" href="#lookUpPostcode">Lookup</a>
												</div>
											</div>
											<div class="control-group">
												<label for="req" class="control-label">Town/Village/City</label>
												<div class="controls">
													<input type="text" name="town" id="city" class=''>
												</div>
											</div>
											<div class="control-group">
												<label for="req" class="control-label">County</label>
												<div class="controls">
													<input type="text" name="county" id="county" class=''>
												</div>
											</div>
											<div class="control-group">
											<label for="req" class="control-label">Nation/Country</label>
											<div class="controls">
												<s:select list="countries" name="countryId" listKey="countryId" listValue="countryName" id="selsear" class='cho' headerKey="-1" headerValue="">
												</s:select>
											</div>
										</div>
										</div>
										<div class="span3">
											<div class="control-group">
												<label for="req" class="control-label">Type of Bussiness</label>
												<div class="controls" id="btnLookup">
													<input type="hidden" id="businessIdHidden" name="businessIdHidden" >
													<input type="text" name="medium" id="txtBussinessName"
													class='input-medium input-square' disabled="disabled">
													<a id="look-up" data-toggle="modal" href="#lookUpBusiness">Lookup</a>
												</div>
											</div>
											<div class="control-group">
												<label for="req" class="control-label">SIC Code</label>
												<div class="controls">
													<input type="text" name="medium" id="txtSICCode"
													class='input-medium input-square' disabled="disabled">
												</div>
											</div>
											<div class="control-group">
											</div>
											<div class="control-group">
											</div>
											<div class="control-group">
											</div>
											<div class="control-group">
												<label for="req" class="control-label">Department Full Description</label>
												<div class="controls">
													<textarea style="resize: none;" rows="3" class="input-square" id="fullDescription" width="210px" name="fullDescription"></textarea>
												</div>
											</div>
											<div class="control-group">
												<label for="req" class="control-label">Phone Number</label>
												<div class="controls">
													<input type="text" name="phonenumber" id="req" class=''>
												</div>
											</div>
											<div class="control-group">
												<label for="req" class="control-label">Fax</label>
												<div class="controls">
													<input type="text" name="fax" id="req" class=''>
												</div>
											</div>
											<div class="control-group">
												<label for="req" class="control-label">Email</label>
												<div class="controls">
													<input type="text" name="email" id="req" class=''>
												</div>
											</div>
											<div class="control-group">
												<label for="req" class="control-label">Web Address</label>
												<div class="controls">
													<input type="text" name="webAddress" id="req" class=''>
												</div>
											</div>
											<div class="control-group" style="visibility: hidden">
												<div class="controls">
													<input type="text" name="txtHidden" id="txtHidden"
														class='required'>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	
	<!-- Type Business -->
	<div id="pageLookupBusinessType"> 
		<%@ include file="LookupBusinessType.jsp" %>
	</div>
	
	<!-- Contact -->

	<div id="pageLookUpContact"> 
		<%@ include file="lookUpContact.jsp" %>
	</div>
	
	<!-- Postcode -->
	<div id="pageLookupPostcode">
		<%@ include file="lookUpPostcode.jsp" %>
	</div>
	
	
	
</div>
